<template>
  <div class="search-music-header">
    <div class="search-music-header-wrap">
      <div
        class="recommend item"
        :class="{ active: current == 0 }"
        @click="handleClick(0)"
      >
        <router-link to="/searchMusic/recommend">推荐</router-link>
      </div>
      <div
        class="rank item"
        :class="{ active: current == 1 }"
        @click="handleClick(1)"
      >
        <router-link to="/searchMusic/rankList">排行榜</router-link>
      </div>
      <div
        class="playlist item"
        :class="{ active: current == 2 }"
        @click="handleClick(2)"
      >
        <router-link to="/">歌单</router-link>
      </div>
      <div
        class="radio item"
        :class="{ active: current == 3 }"
        @click="handleClick(3)"
      >
        <router-link to="/">主播电台</router-link>
      </div>
      <div
        class="singer item"
        :class="{ active: current == 4 }"
        @click="handleClick(4)"
      >
        <router-link to="">歌手</router-link>
      </div>
      <div
        class="new-disc item"
        :class="{ active: current == 5 }"
        @click="handleClick(5)"
      >
        <router-link to="/">新碟上架</router-link>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const current = ref(0)
    const handleClick = (index: number) => (current.value = index)

    return {
      current,
      handleClick
    }
  }
})
</script>

<style scoped lang="less">
.search-music-header {
  width: 100%;
  height: 30px;
  background-color: #c20c0c;
  .search-music-header-wrap {
    margin: auto;
    height: 30px;
    width: 40%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .item {
      height: 20px;
      padding: 0 10px;
      border-radius: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      a {
        text-decoration: none;
        font-size: 10px;
        color: #fff;
      }
    }
  }
}
.active {
  background-color: #9b0909;
}
</style>
